<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
        它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
        */
        .flex{
            display: flex;
            /* 主轴方向 
            column竖向 
            column-reverse反竖向 
            row 横向
            row-reverse 反横向（靠右对齐）*/
            flex-direction:row;
            /* wrap自动换行 no-wrap不换行 wrap-reverse反向自动换行 */
            flex-wrap:wrap;
            /* flex-direction和flex-wrap组合写法 */
            flex-flow:row wrap;
          
            /* 
            父容器对齐 主轴方向上对齐
            space-between
            space-around
            flex-end
            flex-start */
            justify-content:center;
            /* 子项的交叉轴方向对齐 */
            align-items:center;

            align-content:center;
            
        }
        /* flex子项 */
        .flex>div{
              /* 增长时 的比例*/
              flex-grow:1;
             /* 缩小时 的比例  */
            flex-shrink: 1;
            /* 该元素的空间大小 :整数，百分比或者px都可以*/
            flex-basis:auto ;
            /* flex-grow ,flex-shrink,flex-basis */
            flex:1 1 200px;
        }
        .space-between{
            justify-content: space-between;
        }
        .space-around{
            justify-content: space-around;
        }
        .space-evenly{
            justify-content: space-evenly;
        }
        .col1,.col2,.col3,.col4{
            width: 100px;
            height: 50px;
            margin: 20px 0;
            text-align: center;
        }
        .col1{
            background-color: #a4b0be;
        }
        .col2{
            background-color: #57606f;
        }
        .col3{
            background-color: #747d8c
        }
        .col4{
            background-color: #2f3542
        }
    </style>
</head>
<body>
    <h1>space-between</h1>
    <div class="flex space-between">
        <div class="col1">1</div>
        <div class="col2">2</div>
        <div class="col3">3</div>
    </div>
    <h1>space-around</h1>
    <div class="flex space-around">
        <div class="col1">1</div>
        <div class="col2">2</div>
        <div class="col3">3</div>
    </div>
    <h1>space-evenly</h1>
    <div class="flex space-evenly">
        <div class="col1">1</div>
        <div class="col2">2</div>
        <div class="col3">3</div>
    </div>
</body>
</html>